﻿@using Source;


<h1>Profiles</h1>
<!-- Profile create -->
<div>
    <p>Create profile:</p>
    <input type="text" data-bind="value: CreateProfileName" />
    <button data-bind="click: CreateProfile">Create profile</button>
</div>

<!-- Profiles -->
<div>
    <p>Profiles: </p>
    <div data-bind="foreach: Profiles">
        <div>
            <span data-bind="text: Name"></span>
            <button data-bind="click: $parent.RemoveProfile">Remove</button>

            <ul data-bind="foreach: Teams">
                <li data-bind="text: Name"></li>
            </ul>

            <p>Join team:</p>
            <select data-bind="options: $parent.Teams, 
                        optionsText: 'Name', optionsValue: 'Id', value: SelectedTeamId">
            </select>
            <button data-bind="click: $parent.JoinTeam">Join this team</button>
        </div>
    </div>
</div>

<h1>Teams</h1>
<!-- Team create -->
<div>
    <p>Create team:</p>
    <input type="text" data-bind="value: CreateTeamName" />
    <input type="text" data-bind="value: CreateTeamDescription" />
    <button data-bind="click: CreateTeam">Create team</button>
</div>

<!-- Teams -->
<div>
    <p>Teams:</p>
    <div data-bind="foreach: Teams">
        <div>
            <span data-bind="text: Name"></span><span data-bind="text: Description"></span>
            <button data-bind="click: $parent.RemoveTeam">Remove</button>
        </div>
    </div>
</div>

<!-- View Model -->
<script type="text/javascript">
    // Main view model
    function IndexViewModel() {
        var self = this;

        // Observables
        self.Profiles = ko.observableArray();
        self.Teams = ko.observableArray();

        self.GetProfiles = function () {
            var ReceivedData = null;

            $.ajax({
                url: "@Url.Action("GetAllProfiles")",
                type: "POST",
                success: function (data) {
                    self.Profiles.destroyAll();

                    var Count = data.length;
                    for (var i = 0; i < Count; i++) {
                        data[i].SelectedTeamId = ko.observable();
                        self.Profiles.push(data[i]);
                    }
                }
            });
        }

        // Create profile
        self.CreateProfileName = ko.observable();
        self.CreateProfile = function () {
            $.ajax({
                url: "@Url.Action("CreateProfile")",
                type: "POST",
                data: {
                    name: self.CreateProfileName()
                },
                success: function () {
                    self.GetProfiles();
                }
            });
        };

        // Remove profile
        self.RemoveProfile = function (entry) {
            $.ajax({
                url: "@Url.Action("RemoveProfile")",
                type: "POST",
                data: {
                    profileId: entry.Id
                },
                success: function () {
                    self.Profiles.destroy(entry);
                }
            });
        }

        // Get all teams
        self.GetAllTeams = function () {
            $.ajax({
                url: "@Url.Action("GetAllTeams")",
                type: "POST",
                success: function (teams) {
                    self.Teams.destroyAll();

                    for (var i = 0; i < teams.length; i++) {
                        self.Teams.push(teams[i]);
                    }
                }
            });
        }

        // Create team
        self.CreateTeamName = ko.observable();
        self.CreateTeamDescription = ko.observable();
        self.CreateTeam = function () {
            $.ajax({
                url: "@Url.Action("CreateTeam")",
                type: "POST",
                data: {
                    teamName: self.CreateTeamName(),
                    teamDescription: self.CreateTeamDescription()
                },
                success: function () {
                    self.GetAllTeams();
                }
            });
        }

        // Remove team
        self.RemoveTeam = function (entry) {
            $.ajax({
                url: "@Url.Action("RemoveTeam")",
                type: "POST",
                data: {
                    teamId: entry.Id
                },
                success: function () {
                    self.GetAllTeams();
                }
            });
        }

        // Profile -> Join to team
        self.JoinTeam = function (entry) {
            $.ajax({
                url: "@Url.Action("JoinTeam")",
                type: "POST",
                data: {
                    teamId: entry.SelectedTeamId(),
                    profileId: entry.Id
                },
                success: function () {
                    self.GetProfiles();
                }
            });
        }
    };

    var ViewModel = new IndexViewModel();

    ko.applyBindings(ViewModel);

    ViewModel.GetProfiles();
    ViewModel.GetAllTeams();

</script>
